<template>
  <el-container>
    <!-- <el-header></el-header> -->
    <el-main class="nopadding"
      ><el-row>
        <el-col
          :xs="{ span: 24, offset: 0 }"
          :sm="{ span: 24, offset: 0 }"
          :md="{ span: 10, offset: 2 }"
          :lg="{ span: 10, offset: 2 }"
          :xl="{ span: 10, offset: 2 }"
          style="position: relative; width: 90%"
          ><div class="mid">
            <h1 class="large-size">CitHub</h1>
            <p class="p-style">{{ appdata.pcontent }}</p>
            <el-button
              type="success"
              class="btn-explore"
              @click="toProgram()"
              >Explore</el-button
            >
          </div></el-col
        >
        <el-col
          :xs="{ span: 24, offset: 0 }"
          :sm="{ span: 24, offset: 0 }"
          :md="{ span: 8, offset: 2 }"
          :lg="{ span: 8, offset: 2 }"
          :xl="{ span: 8, offset: 2 }"
        >
          <div>
            <img
              src=".\assets\cithub-cover.png"
              style="height: 900px; width: 100%"
            /></div
        ></el-col>
      </el-row>
      <el-row id="program" style="background: #f7f7f7; padding: 30px; margin-top: 20px">
        <el-col
          :xs="{ span: 24, offset: 0 }"
          :sm="{ span: 24, offset: 0 }"
          :md="{ span: 6, offset: index > 0 ? 1 : 2 }"
          :lg="{ span: 6, offset: index > 0 ? 1 : 2 }"
          :xl="{ span: 6, offset: index > 0 ? 1 : 2 }"
          v-for="(item, index) in appdata.card"
          :key="item"
        >
          <el-card
            style="text-align: center; border: 0px; height: 500px"
            :shadow="item.shadow"
          >
            <span :class="item.classname"></span>
            <div style="padding: 14px">
              <h2 style="font-weight: 600">{{ item.title }}</h2>
              <p style="height: 80px">{{ item.desc }}</p>
              <div class="bottom">
                <el-button type="primary" class="btn-visit" @click="visit(index)">visit</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
    <el-footer class="footer">
      <span style="">Copyright &copy; GIST, All Rights Reserved.</span>
    </el-footer>
  </el-container>


  <el-backtop target=".nopadding" :bottom="100">
    <div
      style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
    >
      UP
    </div>
  </el-backtop>
</template>

<script>
import { useRouter } from "vue-router";
import { reactive } from "vue";
export default {
  setup() {
    // eslint-disable-next-line no-unused-vars
    const router = useRouter();

    const appdata = reactive({
      pcontent:
        "An open marketplace of testing tools that provides services for using and studying Combinatorial Interaction Testing (CIT).",
      showimg: true,
      card: [
        {
          shadow: "hover",
          classname: "iconfont iconbook",
          title: "Repository",
          desc: "An online repository that collects almost all scientific publications in the literature of combinatorial testing.",
        },
        {
          shadow: "hover",
          classname: "iconfont iconcomponents-full",
          title: "Service",
          desc: "An open marketplace of testing tools that provides services for using and studying combinatorial testing.",
        },
        {
          shadow: "hover",
          classname: "iconfont icon72",
          title: "Crowdsourcing",
          desc: "A crowdsourcing platform for combinatorial testing to solve combinatorial testing problems",
        },
      ],
    });
    
    const toProgram=()=>{
      document.getElementById("program").scrollIntoView(true)
    }

    const visit=(index)=>{
      if(index==0){
        window.location.href="https://gist.nju.edu.cn/ct_repository"
        window.open(); 
      }
      else if(index==1){
        router.push("/service_index")
      }
      else{
        alert("visit crowdsourcing")
      }

    }

    return {toProgram, appdata,visit };
  },
  methods: {
  },
  components: {},
};
</script>

<style scoped>
.nopadding {
  padding: 0px;
}
.mid {
  position: absolute;
  top: 35%;
  left: 30%;
  height: 30%;
  width: 90%;
  /* margin: -15% 0 0 -25%;  */
}
.large-size {
  margin: 0px;
  font-size: 4rem;
  color: #000;
  font-weight: 700;
}
.p-style {
  color: #6c757d;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.25;
}
.btn-explore {
  margin-top: 20px;
  font-size: 20px;
  /* border-radius: 30px; */
  padding: 10px 30px;
  line-height: 1.5;
  font-weight: 400;
}
.btn-visit {
  margin-top: 20px;
  font-size: 30px;
  padding: 10px 30px;
  line-height: 1.5;
  font-weight: 600;
  min-width: 90%;
  background: #d52349;
}

.iconfont {
  text-align: center;
  font-size: 100px;
}
.footer {
  text-align: center;
  background-color: black;
  padding: 20px 20px;
  height: 60px;
  width: 100%;
  color: white !important;
}
</style>
